<template>
  <transition name="translate">
    <div class="contacts-wrap">
      <common-back :content="headerTitle"></common-back>
      <common-loading v-show="showLoading"></common-loading>
      <div class="concat-form"
           v-show="!showLoading">
        <ul class="concat-form-list">
          <li class="concat-item"
              border-bottom-1px>
            <div class="title">紧急联系人一</div>
            <input type="text"
                   placeholder="请输入"
                   class="input"
                   v-model="name1">
          </li>
          <li class="concat-item"
              border-bottom-1px>
            <div class="title">联系人号码</div>
            <input type="text"
                   placeholder="请输入"
                   class="input"
                   v-model="phone1">
          </li>
          <li class="concat-item"
              border-bottom-1px
              @click="handleShow(id=0)">
            <div class="title">与我的关系</div>
            <div class="content">
              <p class="desc">{{relation1}}</p>
              <i class="iconfont icon-xiangyou"></i>
            </div>
          </li>
          <li class="concat-item"
              border-bottom-1px>
            <div class="title">紧急联系人一</div>
            <input type="text"
                   placeholder="请输入"
                   class="input"
                   v-model="name2">
          </li>
          <li class="concat-item"
              border-bottom-1px>
            <div class="title">联系人号码</div>
            <input type="text"
                   placeholder="请输入"
                   class="input"
                   v-model="phone2">
          </li>
          <li class="concat-item"
              border-bottom-1px
              @click="handleShow(id=1)">
            <div class="title">与我的关系</div>
            <div class="content">
              <p class="desc">{{relation2}}</p>
              <i class="iconfont icon-xiangyou"></i>
            </div>
          </li>
        </ul>
      </div>
      <common-button :content="buttonTitle"
                     @submit="handleSubmit"
                     class="card-btn"></common-button>
      <van-popup v-model="show"
                 position="bottom"
                 :overlay="true">
        <van-picker :columns="relationList"
                    @confirm="handleTimeConfirm"
                    @cancel="handleHide"
                    show-toolbar />
      </van-popup>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
import CommonLoading from 'common/loading/loading'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'contacts',
  components: {
    CommonBack,
    CommonButton,
    CommonLoading
  },
  created () {
    this.getPersonState()
  },
  data () {
    return {
      headerTitle: '紧急联系人',
      buttonTitle: '下一步',
      name1: '',
      phone1: '',
      name2: '',
      phone2: '',
      relationList: [],
      show: false,
      relation1: '朋友',
      relation2: '配偶',
      isOne: true,
      showLoading: true
    }
  },
  computed: {
    ...mapState(['person'])
  },
  methods: {
    ...mapMutations({
      changeContactState: 'changeContactState'
    }),
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.postContacts()
      }
    },
    getPersonState () {
      if (Number(this.person) === 1) {
        this.getContaces()
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    postContacts () {
      this.$api.borrow.authenticationConcats({
        contact_one_name: this.name1,
        contact_one_mobile: this.phone1,
        contact_one_relationship: this.relation1,
        contact_two_name: this.name2,
        contact_two_mobile: this.phone2,
        contact_two_relationship: this.relation2
      })
        .then(this.postContactsSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    postContactsSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$toast.success(res.msg)
        const contacts = 1
        this.changeContactState(contacts)
        this.$localStorage.set('contacts', contacts)
        this.$router.push({
          path: '/borrow/card'
        })
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast.fail({
          duration: 1000,
          message: res.msg
        })
      }
    },
    check () {
      const phoneReg = /^1[3456789]\d{9}/
      if (this.name1 === '') {
        this.$toast({
          duration: 1000,
          message: '紧急联系人1不能为空'
        })
        return false
      }
      if (!phoneReg.test(this.phone1)) {
        this.$toast({
          duration: 1000,
          message: '手机号1格式不正确'
        })
        return false
      }
      if (this.name2 === '') {
        this.$toast({
          duration: 1000,
          message: '紧急联系人2不能为空'
        })
        return false
      }
      if (!phoneReg.test(this.phone2)) {
        this.$toast({
          duration: 1000,
          message: '手机号2格式不正确'
        })
        return false
      }
      if (this.phone1 === this.phone2) {
        this.$toast({
          duration: 1000,
          message: '手机号不能一样，请重新输入'
        })
        return false
      }
      if (this.name1 === this.name2) {
        this.$toast({
          duration: 1000,
          message: '联系人不能一样，请重新输入'
        })
        return false
      }
      return true
    },
    handleTimeConfirm (value) {
      if (this.isOne) {
        this.relation1 = value
      } else {
        this.relation2 = value
      }
      this.show = false
    },
    handleHide () {
      this.show = false
    },
    handleShow (id) {
      this.isOne = id === 0
      this.show = true
    },
    getContaces () {
      this.$api.borrow.getContacts()
        .then(this.getContacesSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getContacesSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.relationList = data.relation
        if (data.contacts != null) {
          this.name1 = data.contacts.contact_one_name
          this.phone1 = data.contacts.contact_one_mobile
          this.relation1 = data.contacts.contact_one_relationship
          this.name2 = data.contacts.contact_two_name
          this.phone2 = data.contacts.contact_two_mobile
          this.relation2 = data.contacts.contact_two_relationship
        }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.contacts-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 20
  overflow-y scroll
  padding()
  padding-top 108px

  .concat-form
    width 100%
    background $common_bgc
    box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 24px
    padding-left 30px
    padding-right 30px
    box-sizing border-box

    .concat-form-list
      width 100%

      .concat-item
        height 110px
        display flex
        justify-content space-between
        align-items center

        .title, .input
          font-size $shop_name
          font-weight 400
          color $id_input
          width 210px

        .input
          height 100%
          border none
          background-color $common_bgc
          flex 1
          padding-left 10px
          padding-right 40px
          box-sizing border-box
          text-align right

        .content
          display flex
          height 100%
          align-items center

          i
            font-size $common_fz
            color $icon_color
            margin-left 20px

          .desc
            font-size $shop_name
            color $id_input

  .card-btn
    position absolute
    bottom 88px
    left 50%
    transform translateX(-50%)
    padding()

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
